<script setup lang="ts">

import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { ExcutePlan, RoundInfo } from '@/models/execute/ExecutePlan';
import { onMounted, reactive, ref, nextTick, getCurrentInstance } from 'vue';
import WisdomRecmStrategyDebug from '../components/debug/WisdomRecmStrategyDebug.vue';
import WisdomMoneyStrategyV90Debug from '../components/debug/WisdomMoneyStrategyV90Debug.vue';
import { useRoute } from 'vue-router';
import { compression, decompress } from '@/utils/compress';
import { PickerOption, showConfirmDialog, showFailToast } from 'vant';
import { WisdomRecmStrategy } from '@/models/execute/recmStrategy/WisdomRecmStrategy';
import { ExcutePlanWithSubPlan } from '@/models/execute/ExcutePlanWithSubPlan';
import { IPlan } from '@/models/execute/IExecutePlan';
import { BossRecmStrategyV3, BossRecmOptionItemV3, BossRecmOptionV3 } from '@/models/execute/recmStrategy/BossRecmStrategyV3';
import { BossRabbitMoneyStrategy, BossRabbitMoneyWithMultipleLimitStrategy } from '@/models/execute/moneyStrategy/BossRabitMoneyStrategy';
import { IMoneyStrategy } from '@/models/execute/IMoneyStrategy';
import { FixedStrategy } from '@/models/execute/recmStrategy/FixedStrategy';


defineOptions({
    components: { WisdomRecmStrategyDebug, WisdomMoneyStrategyV90Debug }
})

const BOSS_RECM_STRATEGY = "BossRecmStrategyV3NewVersion"

let route = useRoute();
const debug = ref(false);
debug.value = route.query.debug ? true : false;
const showModalDlg = ref(false);


let roundInfo = reactive<RoundInfo>(new RoundInfo());
let game = reactive(new ExcutePlanWithSubPlan());

let tuziArray: ExcutePlan[] = [];

const initData = () => {

    roundInfo = reactive<RoundInfo>(new RoundInfo());
    let newGame = new ExcutePlan();
    Object.assign(game, newGame);
    game.subPlan.splice(0, game.subPlan.length);
    var str = localStorage.getItem(BOSS_RECM_STRATEGY);
    if (str) {
        let st = JSON.parse(str) as BossRecmOptionV3[];
        for (let i = 0; i < st.length; i++) {
            var pp = createOptionPlan(st[i], i + 1);
            //pp.copyValue(st[i]);
            var p = reactive(pp);
            game.subPlan.push(p);
        }
    }
    game.toMoney(roundInfo, game.recmInfo, game.userRecmInfo, game.baseMoney);

    resultInputCompoenent.value?.initData();
    resultComponent.value?.initData();
    predictComponent.value?.initData();
    snapShot.splice(0, snapShot.length);

    tuziArray = reactive([]);
    for (let i = 0; i < 3; i++) {
        let t1Game = reactive(new ExcutePlan());
        t1Game.planName = "兔反";
        t1Game.recmStrategy = [new FixedStrategy({ reverse: false })];
        t1Game.moneyStrategy = [new BossRabbitMoneyStrategy("兔1", {
            baseMoney: 100,
            winStep: -(i + 1),
            failStep: 1,
            currentMoney: 100,
            prevMoney: 100,
            maxMoney: 23300,
        })];
        t1Game.toResult(new RoundInfo());
        tuziArray.push(t1Game);
    }

};


onMounted(() => {
    initData();

    nextTick(() => {
        showPredict.value = ['showPredict', 'showResult'];

        collapseRecm.value = (game.recmStrategy.map(x => x.strategyName));
        collapseMoney.value = (game.moneyStrategy.map(x => x.strategyName));
    })
});
const isAuto = ref(false);
const setResult = (result: EnumBjlResult) => {
    roundInfo.results.push(result)
    roundInfo.currentResult = result;
    resultInputCompoenent.value.setResult(result);
    if (game.recmInfo.recmV != EnumBjlResult.U) {
        resultComponent.value?.setResult(result == game.recmInfo.recmV ? 1 : 0);
    }
    else {
        resultComponent.value?.record();
    }
    if (game.userRecmInfo.recmV != EnumBjlResult.U) {
        predictComponent.value?.setResult(result == game.userRecmInfo.recmV ? 1 : 0);
    }
    else {
        predictComponent.value?.record();
    }
    game.setResult(roundInfo, game.recmInfo, game.multiple, game.waterRate, game.fuliRate);
    game.userRecmInfo.recmV = game.toResult(roundInfo);
    roundInfo.userRecm = game.userRecmInfo.recmV;

    let [rv, rm] = game.toMoney(roundInfo, game.recmInfo, game.userRecmInfo, game.baseMoney);
    let win = game.recmInfo.summaryInfo.winMoney - game.recmInfo.summaryInfo.failMoney - game.recmInfo.summaryInfo.waterMoney;
    if (isAuto.value) {
        if (win < 0) {
            let v = parseInt((-win / 10000).toString());
            game.multiple = 1 + v / 10;
        }
        else {
            game.multiple = 1;
        }

    }
    tuziArray.forEach(tuzi => {
        tuzi.setResult(roundInfo, tuzi.recmInfo, tuzi.multiple, tuzi.waterRate, tuzi.fuliRate);
        tuzi.userRecmInfo.recmV = rv;
        roundInfo.userRecm = rv;
        var round = Object.assign({}, roundInfo, { userRecm: rv })
        let [trv, trm] = tuzi.toMoney(round, tuzi.recmInfo, tuzi.userRecmInfo, tuzi.baseMoney);
        tuzi.recmInfo.recmV = trv;
        tuzi.recmInfo.recmMoney = trm;
    })
    console.log(roundInfo.results.slice(-20))
    if ((game.recmInfo.summaryInfo.lfail % 5) == 0 && game.recmInfo.summaryInfo.lfail > 0) {
        showConfirmDialog({
            title: '提示',
            message: '已连输5局，是否AI智能修正',
            width: '80%'
        }).then(() => {
            let array: BossRecmOptionItemV3[] = [];
            let subResult = roundInfo.results.slice(-20);

            let len = subResult.length;
            for (let i = 3; i < len; i++) {
                let item = new BossRecmOptionItemV3();
                let rules = subResult.slice(0, i);
                let recmV = subResult[i];
                item.recmArray = rules;
                item.result = recmV;
                array.push(item);
            }
            showOptionDialog(array)
        });
    }

    record();

};
const showPredict = ref(['showPredict', 'showResult']);
const resultInputCompoenent = ref<any>(null);
const predictComponent = ref<any>(null);
const resultComponent = ref<any>(null);

const debugTabs = ref('recmStrategy');
const collapseRecm = ref(game.recmStrategy.map(x => x.strategyName));
const collapseMoney = ref(game.moneyStrategy.map(x => x.strategyName));

const snapShot: string[] = [];

type SnapObject = {
    game: ExcutePlan,
    roundInfo: RoundInfo
}
const record = () => {
    snapShot.push(compression({ game, roundInfo }));
};

const resetGame = () => {
    showConfirmDialog({
        title: '提示',
        message: '确认重新开始吗？',
        width: '80%'
    }).then(() => {
        // on close
        initData();
        savePlan();
    });
};

const revert = () => {

    resultInputCompoenent.value.revert();
    let revertRound = snapShot.pop();
    if (revertRound) {
        let revertObj = decompress(revertRound) as SnapObject;
        let game = revertObj.game;

        resultComponent.value?.revert();
        predictComponent.value?.revert()
        // if (game.recmInfo.recmV != EnumBjlResult.U) {
        //     resultComponent.value?.revert();
        // }
        // if (game.userRecmInfo.recmV != EnumBjlResult.U) {
        //     predictComponent.value?.revert()
        // }
    }


    let top = snapShot[snapShot.length - 1];
    if (top) {
        let topObj = decompress(top) as SnapObject;

        if (topObj.roundInfo) roundInfo.copyValue(topObj.roundInfo);
        if (topObj.game) game.copyValue(topObj.game);
    }
    else {
        initData();
    }

};
const nextTable = () => {

    showConfirmDialog({
        title: '提示',
        message: '确认换桌吗',
        width: '80%'
    }).then(() => {
        // on close
        resultInputCompoenent.value.nextTable();
        resultComponent.value?.nextTable();
        predictComponent.value?.nextTable();
        roundInfo.changeCount++;

        game.recmInfo.recmV = EnumBjlResult.U;
        game.userRecmInfo.recmV = EnumBjlResult.U;
        game.recmStrategy.forEach(item => {
            if (item instanceof WisdomRecmStrategy) {
                let strategy = (item as WisdomRecmStrategy);
                if (strategy) {
                    strategy.subPlan.forEach(pl => pl.resetPlan());
                    strategy.selectPlan = [];
                }
                //(item as WisdomRecmStrategy)?.subPlan.forEach(pl => pl.resetPlanSummaryInfo());
            }
        });
        game.moneyStrategy.forEach(item => {
            item.resetRecm();
        });
        snapShot.push(compression({ game, roundInfo }));
    });

}

const multiplePickerShow = ref(false);
const showMultiplePicker = () => {
    multiplePickerShow.value = true;
};
const multipleArray = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
const pickerColumns: PickerOption[] = [];
const pickerColumns2: PickerOption[] = [];
//pickerColumns.push({ text: "智能", value: 999 });
for (let i = 0; i < multipleArray.length; i++) {
    pickerColumns.push({ text: multipleArray[i], value: multipleArray[i] });
}
for (let i = 1; i <= 100; i++) {
    pickerColumns2.push({ text: i, value: i });
}

const selectMultiple = ({ selectedOptions }: PickerOption) => {
    let v = parseFloat(selectedOptions[0].value?.toString() ?? "");
    if (isNaN(v)) game.multiple = 1;
    else game.multiple = v;

    if (game.multiple >= 999) {
        isAuto.value = true;
        game.multiple = 1;
    }
    else {
        isAuto.value = false;
    }

    multipleSelect.slice(0, multipleSelect.length);
    multipleSelect.push(game.multiple);
    multiplePickerShow.value = false;
};
const multipleSelect = reactive([game.multiple]);;

const multiplePickerShow2 = ref(false);
let setGame: IPlan | null = null;
const showSetMultiple = (pl: IPlan) => {
    setGame = pl;
    multiplePickerShow2.value = true;
};
const selectMultiple2 = ({ selectedOptions }: PickerOption) => {
    let v = parseFloat(selectedOptions[0].value?.toString() ?? "");
    if (isNaN(v)) v = 1;
    if (setGame) {
        setGame.multiple = v;
    }
    showMoney();
    multiplePickerShow2.value = false;
    savePlan();
};
const switchChange = () => {
    showMoney();
}
const showMoney = () => {
    let [recmV, recmMoney] = game.showMoney();

    game.recmInfo.recmV = recmV;
    game.recmInfo.recmMoney = recmMoney;
}


const createOptionPlan = (optPlan: BossRecmOptionV3, idx: number): IPlan => {
    let pl = reactive(new ExcutePlan());
    let extendMultiple = 10;
    let gameMultiple = 1;
    if (optPlan.extendMultiple) {
        extendMultiple = parseInt(optPlan.extendMultiple.toString());
    }
    if (optPlan.gameMultiple) {
        gameMultiple = parseInt(optPlan.gameMultiple.toString());
    }
    pl.multiple = gameMultiple;
    pl.recmStrategy = [new BossRecmStrategyV3("策略" + idx, {
        graphics: optPlan.graphics,
        rabbitType: optPlan.rabbitType,
        extendMultiple: extendMultiple,
        gameMultiple: gameMultiple
    })]

    /**
    * 0:正常兔子
    * 1:快一步兔子
    * 2:保守兔子
    * 3:阶梯兔子
    * 4:平推兔子
    * 5:固定兔子
    */
    let moneyStrategy: IMoneyStrategy | null = null;
    optPlan.rabbitType = "0";
    switch (optPlan.rabbitType) {
        case "0":
            moneyStrategy = new BossRabbitMoneyStrategy("策略" + idx, { baseMoney: game.baseMoney, winStep: 1, failStep: 0 });
            break;
        case "2":
            moneyStrategy = new BossRabbitMoneyWithMultipleLimitStrategy("策略" + idx,
                { baseMoney: game.baseMoney, winStep: 1, failStep: -1, extendMultiple: extendMultiple })
            break;
        default:
            moneyStrategy = new BossRabbitMoneyStrategy("策略" + idx, { baseMoney: game.baseMoney, winStep: 1, failStep: 0 });
            break;

    }
    if (moneyStrategy) {
        pl.moneyStrategy = [moneyStrategy];
    }

    return reactive(pl);
};
// var optionPlan = createOptionPlan(1);
// var option = reactive(new BossRecmOptionItemV3());

var optionPlan = reactive(new BossRecmOptionV3());
var option = reactive(new BossRecmOptionItemV3());

const addResult = (result: EnumBjlResult) => {
    option.recmArray.push(result);
    //opt.recmArray.push(result);
};

const removeResult = (ele: EnumBjlResult, index: number) => {
    //option.betArray.splice(index, 1);
    option.recmArray.splice(index, 1);
};
const addGraphic = (action: string) => {
    //(optionPlan.recmStrategy[0] as BossRecmStrategyV3).addGraphic(option);
    //optionPlan.graphics.push(option);
    if (option.recmArray.length == 0 || option.result == EnumBjlResult.U) {
        showFailToast("请输入条件和推荐");
        return;
    }
    optionPlan.graphics.splice(0, 0, option);
    option = reactive(new BossRecmOptionItemV3());
};

const removeGraphic = (idx: number) => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认移除规则' + (idx + 1) + "吗？",
    })
        .then(() => {
            // on confirm
            //(optionPlan.recmStrategy[0] as BossRecmStrategyV3).removeGraphic(idx);
            optionPlan.graphics.splice(idx, 1);
        })
        .catch(() => {
            // on cancel
        });
};

const setOptionRecm = (result: EnumBjlResult) => {
    option.result = result;
};
var editIndex = ref(-1);
const addPlan = () => {
    //let rabbitType = (optionPlan.recmStrategy[0] as BossRecmStrategyV3).rabbitType;

    // if (editIndex < 0) {
    //     game.subPlan.push(optionPlan);
    // }
    // optionPlan = createOptionPlan(game.subPlan.length + 1);
    if (optionPlan.graphics.length == 0) {
        showFailToast("请输入规则后再保存");
        return;
    }
    let newPlan = createOptionPlan(optionPlan, game.subPlan.length);
    if (editIndex.value < 0) {
        game.subPlan.push(newPlan);
    }
    else {
        game.subPlan.splice(editIndex.value, 1, newPlan);
    }

    savePlan();
    showModalDlg.value = false;

};
const editPlan = (idx: number) => {
    let plan = game.subPlan[idx];
    optionPlan = reactive<BossRecmOptionV3>({
        graphics: (plan.recmStrategy[0] as BossRecmStrategyV3).getRecm(),
        rabbitType: (plan.recmStrategy[0] as BossRecmStrategyV3).rabbitType,
        extendMultiple: (plan.recmStrategy[0] as BossRecmStrategyV3).extendMultiple,
        gameMultiple: plan.multiple,
    });
    option = reactive(new BossRecmOptionItemV3());
    showModalDlg.value = true;
    editIndex.value = idx;
};
const removePlan = (idx: number) => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认移除计划' + (idx + 1) + "吗？",
    })
        .then(() => {
            // on confirm
            game.subPlan.splice(idx, 1);
            savePlan();
        })
        .catch(() => {
            // on cancel
        });
};
const savePlan = () => {
    var optionList = game.subPlan.map(pl => {
        var opt = new BossRecmOptionV3();
        opt.graphics = (pl.recmStrategy[0] as BossRecmStrategyV3).getRecm();
        opt.extendMultiple = (pl.recmStrategy[0] as BossRecmStrategyV3).extendMultiple;
        opt.rabbitType = (pl.recmStrategy[0] as BossRecmStrategyV3).rabbitType;
        opt.gameMultiple = pl.multiple;
        return opt;
    })
    var strJson = JSON.stringify(optionList);
    localStorage.setItem(BOSS_RECM_STRATEGY, strJson)
};
const showOptionDialog = (filterOption: BossRecmOptionItemV3[]) => {
    optionPlan = reactive<BossRecmOptionV3>({
        graphics: [],
        rabbitType: "0",
        extendMultiple: 10,
        gameMultiple: 1
    });
    if (filterOption.length > 0) {
        optionPlan.graphics.splice(0, 0, ...filterOption);
    }
    showModalDlg.value = true;
    editIndex.value = -1;
};
const resetStorage = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认移除所有计划吗？'
    })
        .then(() => {
            // on confirm
            game.subPlan.splice(0, game.subPlan.length);
            localStorage.removeItem(BOSS_RECM_STRATEGY);
            window.location.href = window.location.href;
        })
        .catch(() => {
            // on cancel
        });
};
const closeOptionDialog = () => {
    showModalDlg.value = false;
};

</script>
<template>

    <van-dialog v-model:show="showModalDlg" title="添加计划" :show-confirm-button="false"
        style="font-size:14px;padding:10px;width:100%;">
        <van-row class="lbl">
            规则列表
        </van-row>
        <div style="max-height: 150px;overflow: auto;">
            <div style="max-height: 150px;overflow: auto;">
                <van-row v-for="(ele, idx) in optionPlan.graphics" class="table-item" :key="idx">
                    <van-col :span="4" class="lbl">规则{{ idx + 1 }}</van-col>
                    <van-col :span="14">
                        <span v-for="(r, ix) in ele.recmArray"
                            :class="['BR', ((r == EnumBjlResult.Z) ? 'Z' : 'X')]"></span>
                    </van-col>
                    <van-col :span="4">
                        <span :class="['BR', ((ele.result == EnumBjlResult.Z) ? 'Z' : 'X')]"></span></van-col>
                    <van-col :span="2">
                        <van-icon name="delete-o" @click="removeGraphic(idx)" />
                    </van-col>
                </van-row>
            </div>
        </div>


        <van-field name="followCount" label="条件" label-align="top" placeholder="请点击右侧对应按钮">
            <template #input>
                <van-row>
                    <van-col :span="24">
                        <span v-for="(ele, index) in option.recmArray"
                            :class="['BR', ((ele == EnumBjlResult.Z) ? 'Z' : 'X')]"
                            @click="removeResult(ele, index)"></span>
                    </van-col>
                </van-row>
            </template>
            <template #button>
                <van-row>
                    <van-col :span="10">
                        <van-button type="primary" class="btn X" @click="addResult(EnumBjlResult.X)" />
                    </van-col>
                    <van-col :span="4"></van-col>
                    <van-col :span="10">
                        <van-button type="primary" class="btn Z" @click="addResult(EnumBjlResult.Z)" />
                    </van-col>

                </van-row>
            </template>
        </van-field>

        <van-field name="reverse" label="推荐" label-align="top">
            <template #input>
                <van-row>
                    <van-col :span="24" v-if="option.result != EnumBjlResult.U">
                        <span :class="['BR', ((option.result == EnumBjlResult.Z) ? 'Z' : 'X')]"></span>
                    </van-col>
                </van-row>
            </template>
            <template #button>
                <van-row>
                    <van-col :span="10">
                        <van-button type="primary" class="btn X" @click="setOptionRecm(EnumBjlResult.X)" />
                    </van-col>
                    <van-col :span="4"></van-col>
                    <van-col :span="10">
                        <van-button type="primary" class="btn Z" @click="setOptionRecm(EnumBjlResult.Z)" />
                    </van-col>

                </van-row>
            </template>
        </van-field>
        <van-field name="rabbitType" label="兔子种类">
            <template #input>
                <van-tabs v-model:active="optionPlan.rabbitType" type="card">
                    <van-tab title="正常兔子" name="0"></van-tab>
                    <!-- <van-tab title="保守兔子" name="2" style="display:none;">
                    </van-tab> -->
                </van-tabs>
            </template>
        </van-field>
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field v-if="optionPlan.rabbitType == '2'" v-model="optionPlan.extendMultiple" type="digit" label="倍数" />
        <van-row gutter="20" style="margin-top:20px;">
            <van-col :span="8">
                <van-button type="warning" block @click="addGraphic">添加条件</van-button>
            </van-col>
            <van-col :span="8">
                <van-button type="danger" block @click="closeOptionDialog">关闭</van-button>
            </van-col>
            <van-col :span="8">
                <van-button type="success" block @click="addPlan">{{ editIndex < 0 ? "添加计划" : "修改计划" }}</van-button>
            </van-col>
        </van-row>
    </van-dialog>
    <van-row>
        <van-col :offset="1" :span="23">
            <BjlInput ref="resultInputCompoenent" />
        </van-col>
    </van-row>

    <van-divider :margin="24" style="margin:0;" />

    <van-row class="recm-item">
        <van-col v-if="game.recmInfo.recmV == EnumBjlResult.X" class="recm x" :span="12">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>

        <van-col :span="12" v-if="game.recmInfo.recmV == EnumBjlResult.Z" class="recm z">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>
    </van-row>

    <van-row>
        <van-col :span="24">
            <van-collapse v-model="showPredict">
                <van-collapse-item name="showPredict" v-if="debug">
                    <template #title>
                        <van-row style="text-align: center;">
                            <van-col offset="1" :span="7">
                                <span style="color:red;">{{ game.userRecmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ game.userRecmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="6">
                                <span :style="[
                                    game.userRecmInfo.summaryInfo.winCount > game.userRecmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : game.userRecmInfo.summaryInfo.winCount < game.userRecmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ game.userRecmInfo.summaryInfo.winCount - game.userRecmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(game.userRecmInfo.summaryInfo.winCount + game.userRecmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        game.userRecmInfo.summaryInfo.winCount > game.userRecmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : game.userRecmInfo.summaryInfo.winCount < game.userRecmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (game.userRecmInfo.summaryInfo.winCount / (game.userRecmInfo.summaryInfo.winCount
                                        +
                                        game.userRecmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>

                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="predictComponent" labelName="神预测" />
                </van-collapse-item>
                <van-collapse-item name="showResult">
                    <template #title>
                        <van-row style="text-align: center;">
                            <van-col :span="3">
                                <van-button type="primary" @click.stop="showOptionDialog" size="mini">添加</van-button>
                            </van-col>
                            <van-col :span="3">
                                <van-button type="primary" @click.stop="resetStorage" size="mini">清理</van-button>
                            </van-col>
                            <van-col offset="1" :span="6">
                                <span style="color:red;">{{ game.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ game.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="4">
                                <span :style="[
                                    game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ game.recmInfo.summaryInfo.winCount - game.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="4">

                                <span
                                    v-if="(game.recmInfo.summaryInfo.winCount + game.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (game.recmInfo.summaryInfo.winCount / (game.recmInfo.summaryInfo.winCount +
                                        game.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>
                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="resultComponent" labelName="运势路" />
                </van-collapse-item>
            </van-collapse>
        </van-col>
    </van-row>

    <van-row class="recm-item">
        <van-col :span="6" style="color:red;">
            {{ game.recmInfo.summaryInfo.fuliMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" style="color:blue;">
            {{ game.recmInfo.summaryInfo.waterMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" :style="[
            (game.recmInfo.summaryInfo.winMoney -
                game.recmInfo.summaryInfo.failMoney -
                game.recmInfo.summaryInfo.waterMoney > 0) ? { 'color': 'red' }
                : (game.recmInfo.summaryInfo.winMoney -
                    game.recmInfo.summaryInfo.failMoney -
                    game.recmInfo.summaryInfo.waterMoney < 0) ? { 'color': 'blue' } : ''
        ]">
            {{ (game.recmInfo.summaryInfo.winMoney -
                game.recmInfo.summaryInfo.failMoney -
                game.recmInfo.summaryInfo.waterMoney).toFixed(0) }}
        </van-col>
        <van-col :span="6" v-if="debug">
            <div v-if="game.userRecmInfo.recmV == EnumBjlResult.Z" class="urecm Z"></div>
            <div v-else-if="game.userRecmInfo.recmV == EnumBjlResult.X" class="urecm X"></div>
            <div v-else>暂无预测</div>
        </van-col>
    </van-row>

    <van-row class="operate">
        <van-col :span="6">
            <van-button class="BSync" @click="revert">撤销</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="resetGame">重置</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="nextTable">换桌</van-button>
        </van-col>
        <van-col :span="6">
            <van-button style="width:75px" class="BSync" @click="showMultiplePicker">{{ isAuto ? ("智能" +
                (debug ? ("|" + game.multiple) : "")) :
                game.multiple
                }}</van-button>
        </van-col>
    </van-row>


    <van-row justify="center" class="recm-item" style="margin:40px 0;">
        <van-col offset="1" :span="10" class="recm x" @click="setResult(EnumBjlResult.X)">&nbsp;</van-col>
        <van-col offset="1" :span="10" class="recm z" @click="setResult(EnumBjlResult.Z)">&nbsp;</van-col>
    </van-row>

    <van-row v-for="(sbPlan, idx) in tuziArray"
        style="text-align: center;margin:15px 0;font-size:16px;height:30px;line-height:30px;">
        <van-col :span="3"></van-col>
        <van-col :span="4">
            <span v-if="sbPlan.recmInfo.recmV == EnumBjlResult.Z"
                style="color:white;background-color: red;width:50px;height:30px;line-height: 30px;display:inline-block;">{{
                    sbPlan.recmInfo.recmMoney
                }}</span>
            <span v-else-if="sbPlan.recmInfo.recmV == EnumBjlResult.X"
                style="color:white;background-color: blue;width:50px;height:30px;line-height: 30px;display:inline-block;">{{
                    sbPlan.recmInfo.recmMoney
                }}</span>
            <span v-else>-</span>
        </van-col>
        <van-col :span="6" :style="[
            (sbPlan.recmInfo.summaryInfo.winMoney
                > sbPlan.recmInfo.summaryInfo.failMoney) ? { 'color': 'red' }
                : (sbPlan.recmInfo.summaryInfo.winMoney
                    < sbPlan.recmInfo.summaryInfo.failMoney) ? { 'color': 'blue' } : ''
        ]">
            {{ sbPlan.recmInfo.summaryInfo.winMoney - sbPlan.recmInfo.summaryInfo.failMoney }}
        </van-col>
        <van-col :span="6">
            <span style="color:red;">{{ sbPlan.recmInfo.summaryInfo.winCount }}</span>
            -
            <span style="color:blue;">{{ sbPlan.recmInfo.summaryInfo.failCount }}</span>
        </van-col>
    </van-row>
    <!-- 底部弹出 -->
    <van-popup v-model:show="multiplePickerShow" position="bottom" :style="{ height: '50%' }">
        <van-picker title="请选择倍率" :columns="pickerColumns" @cancel="multiplePickerShow = false"
            @confirm="selectMultiple" />
    </van-popup>

    <van-popup v-model:show="multiplePickerShow2" position="bottom" :style="{ height: '50%' }">
        <van-picker title="请选择倍率" :columns="pickerColumns2" @cancel="multiplePickerShow2 = false"
            @confirm="selectMultiple2" />
    </van-popup>
    <van-row>
        <van-col span="24" style="text-align: center">
            <span style="color:red">{{ game.zSum }}</span>
            -
            <span style="color:blue">{{ game.xSum }}</span>
        </van-col>
    </van-row>
    <van-row v-for="(pl, idx) in game.subPlan" style="text-align: center;margin:5px 0;font-size:16px;">
        <van-col :span="2" style="text-align: center;">{{ (idx + 1) }}</van-col>
        <!-- <van-col :span="3">
            <van-switch v-model="pl.running" @change="switchChange" size="18px">
                <template #node>
                    <div class="icon-wrapper">
                        <van-icon :name="pl.running ? 'success' : 'cross'" />
                    </div>
                </template>
            </van-switch>
        </van-col> -->

        <van-col :span="5">
            <span v-if="pl.recmInfo.recmV == EnumBjlResult.Z" style="color:red;">{{ pl.recmInfo.recmMoney }}</span>
            <span v-else-if="pl.recmInfo.recmV == EnumBjlResult.X" style="color:blue;">{{ pl.recmInfo.recmMoney
                }}</span>
            <span v-else>-</span>
        </van-col>
        <van-col :span="6" :style="[
            (pl.recmInfo.summaryInfo.winMoney
                > pl.recmInfo.summaryInfo.failMoney) ? { 'color': 'red' }
                : (pl.recmInfo.summaryInfo.winMoney
                    < pl.recmInfo.summaryInfo.failMoney) ? { 'color': 'blue' } : ''
        ]">
            {{ pl.recmInfo.summaryInfo.winMoney - pl.recmInfo.summaryInfo.failMoney }}
        </van-col>
        <van-col :span="9">
            <van-button class="BSync" @click="showSetMultiple(pl)">{{ pl.multiple }}</van-button>
            <van-button class="Edit" @click="editPlan(idx)">编辑</van-button>
            <van-button class="Delete" @click="removePlan(idx)">删除</van-button>
        </van-col>
    </van-row>

</template>

<style scoped>
span.z {
    width: 30px;
    height: 30px;
    border-radius: 90px;
    margin: 0 10px;
}

.st {
    font-size: 16px;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.operate {
    text-align: center;
    height: auto;
    margin: 5px 0;
}

.recm-item {
    margin: 5px 0;

    div {
        align-items: center;
        color: coral;
        height: 40px;
        line-height: 40px;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-size: 16px;
    }

    .recm {
        border-radius: 0;
        /* line-height: 40px; */
        padding: 5px 30px;
        width: 100%;
        font-size: 24px;
    }

    .recm.x {
        color: white;
        background-color: blue;
    }

    .recm.z {
        color: white;
        background-color: red;
    }

    .urecm {
        width: 13px;
        height: 13px;
        border-radius: 90px;
        display: inline-block;

    }

    .urecm.z {
        border: 1px solid red;
    }

    .urecm.x {
        border: 1px solid blue;
    }
}


div.recm {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 90px;
}

div.Z {
    border: 3px solid red;
}

div.X {
    border: 3px solid blue;
}

div.B {
    border: 3px solid rgb(6, 237, 83);
}

.operate button,
.operate_button button {
    font-size: 12px;
    color: white;
    border: none;
    margin: 5px 15px;
    padding: 10px;
}

.BZ {
    background-color: #ae2a2a;
    color: red !important;
}

.BX {
    background-color: #2a71ae;
    color: blue !important;
}

.BSync {
    background-color: coral;
    color: white;
    height: 30px;
    width: 45px;
}

.Edit {
    background-color: #2a71ae;
    color: white;
    height: 30px;
    width: 45px;
    font-size: 12px;
}

.Delete {
    background-color: red;
    color: white;
    height: 30px;
    width: 45px;
    font-size: 12px;
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}

.BR {
    width: 15px;
    height: 15px;
    border-radius: 90px;
    margin: 0 3px;
    display: inline-block;
}

.BR.X {
    border: 1px solid blue;
}

.BR.Z {
    border: 1px solid red;
}

.btn {
    height: 20px;
    width: 30px;
    border: none;
    margin: auto;
}

.btn.X {
    background-color: blue;
}

.btn.Z {
    background-color: red;
}

.table-item {
    min-height: 30px;
}

.icon-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
}

.icon-wrapper .van-icon-success {
    line-height: 20px;
    color: var(--van-blue);
}

.icon-wrapper .van-icon-cross {
    line-height: 20px;
    color: var(--van-gray-5);
}
</style>